<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/resources/scaffold/pageTemplate.xhtml">

	<f:metadata>
		<f:viewParam name="id" value="#{itemBean.id}"/>
		<f:event type="preRenderView" listener="#{itemBean.retrieve}"/>
	</f:metadata>

	<ui:param name="pageTitle" value="View Item"/>

	<ui:define name="header">
		Item
	</ui:define>

	<ui:define name="subheader">
		Visualizar Item
	</ui:define>

	<ui:define name="footer"/>

	<ui:define name="main">
	
	<script>
		function evalSound() {
			alert('/abc/sound/#{itemBean.item.nome}.mp3');
			//document.getElementById('snd').innerHTML='<embed src="/abc/sound/#{categoriaBean.categoria.nome}.mp3"  width="1" height="1"  id="sound1" enablejavascript="true" />';
			document.getElementById('snd').innerHTML='<audio controls="controls" autoplay="autoplay" id="audio" style="display:none;"><source src="/abc/sound/#{itemBean.item.nome}.mp3" type="audio/mpeg"/></audio>';
		}
	</script>
	
		<h:panelGrid columnClasses="label,component,required" columns="3">
			<h:outputLabel for="itemBeanItemNome" value="Nome:"/>
			<h:outputText id="itemBeanItemNome" value="#{itemBean.item.nome}"/>
			<h:outputText/>
			<h:outputLabel for="itemBeanItemCategoria" value="Categoria:"/>
			<h:link id="itemBeanItemCategoria" outcome="/categoria/view" value="#{itemBean.item.categoria}">
				<f:param name="id" value="#{itemBean.item.categoria.id}"/>
			</h:link>
			<h:outputText/>
			<h:outputLabel for="itemBeanItemImagem" value="Imagem:"/>
			<h:graphicImage value="/image/#{itemBean.item.nome}.jpg"
			    onclick="javascript:evalSound();"/>

			<p id="snd">
				<audio controls="controls" autoplay="autoplay" id="audio" style="display:none;"
				     src="/abc/sound/#{itemBean.item.nome}.mp3">
				</audio>

			</p>
			
		</h:panelGrid>

		<div class="buttons">
			<h:link value="Voltar" outcome="search" styleClass="btn btn-primary"/> 
			<h:link value="Editar" outcome="create" includeViewParams="true" styleClass="btn btn-primary"/>
			<h:link value="Criar Novo" outcome="create" styleClass="btn btn-primary"/>
		</div>
	</ui:define>

</ui:composition>